<template>
	<div id="bar">I'm bar
		<div v-for="p in products">{{p.title}} {{p.price}} {{p.inventory}}
			<span @click="addToCart(p)">add</span>
		</div>
		<div>Cart:
			<div v-for="c in cartProducts">{{c.title}} {{c.price}} {{c.quantity}}</div>
		</div>
	</div>
</template>
<script>
	import { mapGetters, mapMutations, mapActions } from 'vuex'
	export default{
		name:'bar',
		methods:{
			...mapMutations({

			}),
			...mapActions({
				'addToCart':'addToCart'
			})
		},
		computed: {
			...mapGetters({
				products: 'allProducts',
				cartProducts: 'cartProducts'
			})
		},
		mounted(){
			this.$store.dispatch('getAllProducts');
		}
	}
</script>
<style>
	#bar{
		width: 100%;
		height: 400px;
		background: skyblue;
		transition: all .3s ease-in-out;
		position: absolute;
		top: 350px;
		left: 0;
	}
</style>